<template>
  <div class="rightMiddle">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="chart" id="leftBottom11"></div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("leftBottom11"));
    const option = {
      tooltip: {
        trigger: "axis",
        textStyle: {
          fontSize: 20,
        },
      },
      legend: {
        itemWidth: 40,
        itemHeight: 20,
        textStyle: {
          color: "#fff",
          fontSize: 20,
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
              width: 2,
            },
          },
          axisTick: {
            show: false,
            label: {
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 20,
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          name: "kwh",
          nameTextStyle: {
            color: "#fff",
            fontSize: 18,
          },
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 18,
          },
        },
        {
          name: "m³",
          nameTextStyle: {
            color: "#fff",
            fontSize: 18,
          },
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 18,
          },
        },
      ],
      series: [
        {
          name: "日能量",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#65FADE" },
              { offset: 1, color: "#00B780" },
            ]),
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
        {
          name: "吨水电耗",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            color: "#FFC200",
          },
          data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
        },
      ],
    };

    // 绘制图表
    myChart.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightMiddle {
  margin-top: 0px;
  position: relative;

  .chart {
    margin: 30px 0 0px;
    width: 100%;
    height: 440px;
  }
}
</style>
